import React, { Component } from "react";
import "./index.css";
class Index extends Component {
//   state = {
//     type: "index",
//   };
  handleClick = (type) => {

    this.props.history.push(type);

  };
  render() {
    return (
      <div className="tabbar">
        <div className="tabbar-content">
          {/* tabbar 内容通过插槽引入的 */}
          {this.props.children}
        </div>
        <div className="tabbar-bottom">
          <div
            className={
              this.props.type === "index"
                ? "tabbar-item-active tabbar-bottom-item"
                : "tabbar-bottom-item"
            }
            onClick={this.handleClick.bind(this, "index")}
          >
            <i className="iconfont icon-icon-test"></i>
            <span className="text">首页</span>
          </div>
          <div
            className={
              this.props.type === "house"
                ? "tabbar-item-active tabbar-bottom-item"
                : "tabbar-bottom-item"
            }
            onClick={this.handleClick.bind(this, "house")}
          >
            <i className="iconfont  icon-chazhaofangyuan"></i>
            <span className="text">找房</span>
          </div>
          <div
            className={
              this.props.type === "info"
                ? "tabbar-item-active tabbar-bottom-item"
                : "tabbar-bottom-item"
            }
            onClick={this.handleClick.bind(this, "info")}
          >
            <i className="iconfont icon-zixun"></i>
            <span className="text">咨询</span>
          </div>
          <div
            className={
              this.props.type === "my"
                ? "tabbar-item-active tabbar-bottom-item"
                : "tabbar-bottom-item"
            }
            onClick={this.handleClick.bind(this, "my")}
          >
            <i className="iconfont icon-wode"></i>
            <span className="text">我的</span>
          </div>
        </div>
      </div>
    );
  }
}

export default Index;
